<template>
	<div class="subskill-list-page">
		<!-- 子技能列表 -->
		<div class="subskill-list">
			<!-- 列表头部 -->
			<div class="list-header">
				<div class="header-item name-header">子技能名称</div>
				<div class="header-item level-header">熟练程度</div>
			</div>

			<!-- 列表项 -->
			<div class="subskill-item" v-for="(item, index) in skillList" :key="index">
				<div class="main-info">
					<div class="subskill-name">
						<span>{{item.skillName}}</span>
					</div>
					<div class="proficiency-level">
						<span class="level-tag advanced" :class="item.levae == '精通' ? 'advanced1' : item.levae == '入门' ? 'advanced2' : 'advanced3'">{{item.levae}}</span>
					</div>
				</div>
				<div class="note-info">
					<div class="note-label">详情：</div>
					<div class="note-content">
						{{item.remark}}
					</div>
				</div>
				<div class="note-info">
					<span class="note-label operation" style="color:red" @click="del(item)">删除</span>
					<span class="note-label operation" style="color:#42B983" @click="gotoEdit(item)">修改</span>
				</div>
			</div>
		</div>

		<!-- 底部按钮 -->
		<div class="bottom-button-container">
			<button class="primary-button" @click="addSkill">
				<i class="button-icon"></i>
				<span>添加技能</span>
			</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				classId: '',
				skillList: []
			}
		},

		onLoad(option) {
			this.classId = option.classId || ''
			this.getInit()
		},

		onShow() {
			this.getInit()
		},

		methods: {
			async getInit() {
				let result = await this.$axios('overallSituation', {
					queryId: this.classId,
					state: 'look',
					databaseName: 'mySkillDetail'
				}, true)
				if (result.code == 200) {
					this.skillList = result.data || []
				}
			},

			addSkill() {
				this.$router(`/subPackages1/pages/mySkill/addChildren?classId=${this.classId}`)
			},

			gotoEdit(item) {
				this.$router(`/subPackages1/pages/mySkill/addChildren?_id=${item._id}`)
			},

			del(item) {
				let _this = this
				uni.showModal({
					title: "提示",
					content: "确定要删除这个技能吗？",
					success: async function(res) {
						if (res.confirm) {
							let parmse = {
								...item,
								state: "delete",
								databaseName: 'mySkillDetail',
							};
							let res = await _this.$axios("overallSituation", parmse)
							if (res.code == 200) {
								_this.getInit();
								_this.$showToast('删除成功')
							}
						}
					},
				});
			}
		}
	}
</script>

<style>
	/* 基础样式设置 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.subskill-list-page {
		height: 89vh;
		background-color: #f5f5f7;
		overflow-y: auto;
	}

	/* 页面标题栏 */
	.page-header {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 16px 20px;
		border-bottom: 1px solid #e0e0e0;
		position: relative;
	}

	.page-header h1 {
		font-size: 18px;
		color: #333;
		font-weight: 600;
	}

	.back-btn,
	.add-btn {
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-btn {
		position: absolute;
		left: 20px;
	}

	.add-btn {
		position: absolute;
		right: 20px;
	}

	.back-icon,
	.add-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		position: relative;
	}

	.back-icon::before {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #333;
		border-top: 2px solid #333;
		transform: rotate(-45deg);
		top: 5px;
		left: 5px;
	}

	.add-icon::before {
		content: '+';
		position: absolute;
		color: #333;
		font-size: 22px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 子技能列表 */
	.subskill-list {
		margin-top: 10px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	/* 列表头部 */
	.list-header {
		display: flex;
		padding: 12px 20px;
		background-color: #f9f9f9;
		border-bottom: 1px solid #e0e0e0;
	}

	.header-item {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.name-header {
		flex: 3;
	}

	.level-header {
		flex: 2;
	}

	/* 列表项 */
	.subskill-item {
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
		transition: background-color 0.2s;
	}

	.subskill-item:last-child {
		border-bottom: none;
	}

	.subskill-item:hover {
		background-color: #fafafa;
	}

	/* 主要信息部分 */
	.main-info {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.subskill-name {
		flex: 3;
	}

	.subskill-name span {
		font-size: 16px;
		color: #333;
	}

	.proficiency-level {
		flex: 2;
	}

	.level-tag {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 13px;
		font-weight: 500;
	}

	.level-tag.advanced1 {
		background-color: #fff3e0;
		color: #f57c00;
	}

	.level-tag.advanced2{
		background-color: #e3f2fd;
		color: #1976d2;
	}

	.level-tag.advanced3 {
		background-color: #e8f5e9;
		color: #43a047;
	}

	/* 备注信息部分 */
	.note-info {
		display: flex;
		align-items: flex-start;
	}

	.note-label {
		font-size: 14px;
		color: #999;
		min-width: 50px;
		flex-shrink: 0;
	}

	.note-content {
		flex: 1;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		/* 最多显示三行，超出部分显示省略号 */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 底部按钮样式 */
	.bottom-button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 12px 20px;
		box-sizing: border-box;
		border-top: 1px solid #e0e0e0;
	}

	.primary-button {
		width: 100%;
		height: 48px;
		background-color: #42b983;
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s;
	}

	.primary-button:hover {
		background-color: #359e75;
	}

	.button-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 8px;
		position: relative;
	}

	.button-icon::before {
		content: '✦';
		position: absolute;
		color: white;
		font-size: 16px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.operation {
		color: red;
		margin-top: 5px;
	}
</style>